<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .wrap{

            background: #ccc;
            position: relative;
        }
        .ball{
            width:5px;
            height: 5px;
            background: red;
            border-radius: 50%;
            position: absolute;
        }
        .box {
            width:416px;
            height:416px;
        }

    </style>
</head>
<body>
<div class="box">
    <div class="wrap">

        <div class="canvas-box" style="width: 416px; height: 416px;" id="Div1"> 
            <canvas id="cvs" width="416" height="416" style="background:url(wx123.png)">不支持canvas</canvas>
        </div>
        <!-- <img  src="123.png" alt=""> -->
        <div class="container"></div>
    </div>
</div>

<input type="text" name="coor" id="x_y" placeholder="实时坐标" >
<input type="button" name="clear" id="clear" onclick="clearCtx()" value="清除画布">
<input type="button" value="添加区域" class="btn" id="btn_add" /><br/>
<input type="text" name="coor" id="x_y1" placeholder="坐标" ><br/>
<input type="text" name="coor" id="x_y2" placeholder="坐标" ><br/>
<input type="text" name="coor" id="x_y3" placeholder="坐标" >

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    $('.wrap').click(function(e){
        var radius=4;//半径
        var offset=$(this).offset();
        var top=e.pageY-offset.top-radius+"px";
        var left=e.pageX-offset.left-radius+"px";
        //$('.wrap').append('<div class="ball" style="top:'+top+';left:'+left+'"></div>');
        $('.container').html('<div class="ball" style="top:'+top+';left:'+left+'"></div>');

        // 在页面创建 box
        // var active_box = document.createElement("div");
        // active_box.id = "container";
        // active_box.className = "ball";
        // active_box.style.top = top ;
        // active_box.style.left = left ;
        // document.body.appendChild(active_box);
        // active_box = null;


        //alert(top+"_"+left);
        $("#x_y").val(top+","+left);//赋值
    })
</script>
 <script type="text/javascript">
        
        var cvs = document.getElementById("cvs");
        var cvsClientRect = cvs.getBoundingClientRect();
        var points = [];
        
        
        cvs.addEventListener("mousedown", mousedownHandler, false);
        var ctx = cvs.getContext('2d');
        var flag = false;
        


        function mousedownHandler (event){
            if(event.button == 0 && !flag) {
                points.push({
                    x: event.pageX - cvsClientRect.x,
                    y: event.pageY - cvsClientRect.y
                });
                if(points.length>=1) {
                    cvs.addEventListener("mousemove", mousemoveHandler, false);
                }
                drawPolygon(points);
            } else if(event.button == 2) {
                flag = true;
                cvs.removeEventListener("mousemove", mousemoveHandler);
            }
        }

        //鼠标双击
        function mousedbclick(event)
        {
            flag = true;
            cvs.removeEventListener("mousemove", mousemoveHandler);
        }
 
        function drawPolygon(points) {
            ctx.clearRect(0,0,416,416);
 
            ctx.strokeStyle = '#000';
            ctx.beginPath();
            ctx.moveTo(points[0].x,points[0].y);
            for(var i=1;i<points.length;i++) {
              ctx.lineTo(points[i].x,points[i].y);

              //赋值
              $("#x_y"+ i).val(points[i].x+","+points[i].y);//赋值

            }
            ctx.closePath();
            ctx.stroke();
        }
 
        function mousemoveHandler(event) {
            drawPolygon(points.concat({
                x: event.pageX - cvsClientRect.x,
                y: event.pageY - cvsClientRect.y
            }));
        }

        function clearCtx() {

            // var c=document.getElementById("cvs");  
            // var cxt=c.getContext("2d");  
              
            // // cxt.fillStyle="#ffffff";  
            // // cxt.beginPath();  
            // // cxt.fillRect(0,0,c.width,c.height);  
            // // cxt.closePath();  
            points=[];

            ctx.clearRect(0,0,416,416);
           

            // var c1 = document.getElementById('cvs');
            // c1.remove();//用于清除canvas  重要
            // $("#Div1").html("<canvas id=\"cvs\" width=\"416\" height=\"416\" style=\"background:url(123.png)\">添加控件</canvas>");

            // cvs.addEventListener("mousedown", mousedownHandler, false);
            
            // flag = false;
            //window.location.replace("index333.html");
        }


        $("#btn_add").click(function(){
            flag = false;
            cvs.addEventListener("mousedown", mousedownHandler, false);
            cvs.addEventListener("dblclick", mousedbclick, false);
        });

    </script>
</body>
</html>